/* CSS style used for the AGEDA site */

/* For the header and background images. */

:root {
    --header-image: url('resources/siteBanner.png');
    --body-bg-image: url('resources/tile.png');

    /* Colors */
    --content: #43256E;
}

/* The following is for the special font used for this website, called Cadman.
   It is a special free-to-use font that is specifically designed to be
   dyslexic-friendly. The font can be downloaded here: https://www.fontspace.com/cadman-font-f59540 */

@font-face {
    font-family: Cadman;
    src: url('resources/Cadman.ttf');
}

@font-face {
    font-family: Cadman;
    src: url('resources/CadmanBold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: Cadman;
    src: url('resources/CadmanItalic.ttf');
    font-style: italic;
}

@font-face {
    font-family: Cadman;
    src: url('resources/CadmanBoldItalic.ttf');
    font-style: italic;
    font-weight: bold;
}

body {
    font-family: 'Cadman', sans-serif;
    margin: 0;
    background-color: #2E164C;

    /* This portion is for displaying the tiled background. */
    background-size: 65px;
    color: #EBF6FF;
    background-image: var(--body-bg-image);
}

* {
    box-sizing: border-box;
}

/* The next section of this CSS file is for formatting the page, including colors and spacing. */


/* The "container" is what wraps your entire website. If you want something (like the header) to be wider than
   the other elements, you will need to move that div outside of the container */
#container {
    max-width: 900px;
    /* This is the width of your layout. */
    /* If you change the above value, scroll to the bottom
and change the media query according to the comment! */
    margin: 0 auto; /* This centers the entire page */
}

/* The area below is for all links on your page EXCEPT for the navigation */
#container a {
    color: #64CBF5;
    font-weight: bold;
    /* If you want to remove the underline you can add a line below here that says:
       text-decoration:none; */
}

#header {
    width: 100%;
    background-color: #654F8C;
    height: 150px;

    /* The header image defined earlier is basically a background image acting as a banner in the header container. */
    background-image: var(--header-image);
    background-size: 100%;
}

/* The navigation bar, this has a lot of parts going into it, especially to get the subitem menus working. */
#navbar {
    height: 40px;
    background-color: #0B092E;
    width: 100%;
}

/* Note, "ul" is "unordered list" and "li" is for "list item", so an item (the <li> tags) within a list (the <ul> tags) */
#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

#navbar li {
    color: #64CBF5;
    padding-top: 10px;
}

/* For links (<a> tags) within a list item */
#navbar li a {
    color: #64CBF5; /* Color for navigation bar text */
    font-weight: 800;
    text-decoration: none; /* Removes underlines from list items */
}

/* Navigation link when a link is hovered over in a list item */
#navbar li a:hover {
    color: #9CBA9E;
    text-decoration: underline;
}

/* For when a link in general is hovered over in the navigation bar */
#navbar a:hover{
 background:#0B092E;
 color:#9CBA9E;
 transition:0.2s all linear;
 z-index:1;
}

#navbar li > ul {
 background:#0B092E;
 display:none;
 position:absolute;
 margin-left:0;
 border:1px solid #9CBA9E;
}

#navbar li > ul a { /* This one in particular is for the padding of the subitem menus.*/
 padding-left:10px;
 padding-right:10px;
 padding-top:5px;
 padding-bottom:5px;
}

#navbar li > ul li{
 display:block;
}

#navbar li:hover > ul{
 display:block;
}

#navbar ul ul ul {
 position:absolute;
 left:100%;
}

ul.subitems {
     padding-left:0;
     padding-right:0;
     margin-right:0;
}
ul.subitems li a {
     padding-right:0;
     margin-right:0;
     padding-left:10px;
     padding-right:10px;
     padding-top:10px;
     display:block;
}

#flex {
    display: flex;
}

/* This is for the side bar, which is built using the <aside> tags */
aside {
    background-color: #2E164C;
    width: 200px;
    padding: 20px;
    font-size: smaller; /* Makes the sidebar text slightly smaller. */
}


/* For the main content area of a given page. */
main {
    background-color: #4A1769;
    flex: 1;
    padding: 20px;
    order: 2;
}

*/ #sidebar {
    order: 1;
}

footer {
    background-color: #0B092E;
    width: 100%;
    height: 60px;
    padding: 10px;
    text-align: center;
}

h1,
h2,
h3 {
    text-align: center;
    color: #64CBF5;
}

h1 {
    font-size: 25px;
}

strong {
    /* Can be used in <p> tags to bolden text. */
    color: #64CBF5;
}

/* Special box used for the sidebar. */
.box {
    background-color: #0B092E;
    border: 1px solid #64CBF5;
    padding: 10px;
}

/* Appears right above the header banner of the page. */
#topBar {
    width: 100%;
    height: 30px;
    padding: 10px;
    font-size: smaller;
    background-color: #0B092E;
    text-align: center;
}


/* For special cases on how the page should load, such as on mobile devices(?) */

/* To change the width of your page: By default, the container width is 900px.
   In order to keep things responsive, take your new height, and then subtrack it by 100.
   Use this new number as the "max-width" value below.
*/

@media only screen and (max-width: 800px) {
    #flex {
        flex-wrap: wrap;
    }

    aside {
        width: 100%;
    }

    /* Order for how the main area, sidebar, and navigation bar are loaded. */
    main {
        order: 1;
    }

    #sidebar {
        order: 2;
    }

    #navbar ul {
        flex-wrap: wrap;
    }
}